<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平方向的外边距</title>
    <style>
        .box1{
            width: 600px;
            height: 400px;
            border: 10px red solid;
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            margin-left: 0;
            /* margin-right: auto;
            margin-left: auto; */
            /* margin:0 auto; */
            /* 
                外边距不会影响到可见框的大小，
                    但是他会影响盒子的实际大小
                
                box2是box1的子元素，所以box2位于box1的内容区中

                子元素的实际宽度 = 父元素内容区的宽度
                可见框的宽度 + 左右外边距 = 600
                200 + 左右外边距 = 600
                200 + 0 + 0 = 600

                当等式不能满足时，浏览器会自动调整相应值也使得等式满足
                    如果width margin-left margin-right 都有值时
                        它会自动调整 margin-right的值以使等式满足
                        200 + 0 + 400 = 600
                    如果width margin-left margin-right中有为auto的值
                        则会自动调整其以使等式满足
                        200 + auto + 0 = 600
                              400  
                        auto + 0 + 0 = 600
                        600
                        auto + 100 + 0 = 600
                        500
                    如果width是auto，左或右外边距也为auto，则为auto的外边距自动设置为0
                    如果width有值，左右外边距为auto
                        则浏览器会自动将左右外边距设置为一个相同的值
                        以使子元素在父元素中居中
                        我们经常使用这种手段，让一个元素在其父元素中居中
                            margin: 0 auto;
                    如果width 左右margin都是auto，则左右margin自动设置为0
            */
            
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>